import { Button, Pagination, PaginationProps } from 'antd'
import ImageGrid, { ImageCardProps } from '../../../component/ImageGrid'
import { useEffect, useState } from 'react'
import { useSearchParams } from 'react-router-dom'
import { useAppDispatch, useAppSelector } from '../../../hooks/store'
import { createPicture, detailPagerChange, fetchFavoritePictures, fetchPictures } from '../../../store/slice/picture'
import { stringToNumber } from '../../../util/tool'
import PictureFormModal from './PictureFormModal'
import { CreatePictureParmas } from '../../../api/picture'
import useWindowSize from '../../../hooks/size'

const UserContent: React.FC = () => {
    const [searchParams, setSearchParams] = useSearchParams()
    const detailState = useAppSelector((state) => state.detail)
    const [addDetailOpen, setAddDetailOpen] = useState<boolean>(false)
    const categoryState = useAppSelector((state) => state.category)
    const favoriteState = useAppSelector((state) => state.favorite)
    const pager = useAppSelector((state) => state.detail.pager)
    const [columnCount,setColumnCount] = useState<number|undefined>()
    const { width, height } = useWindowSize()
    const onCreate = (values: CreatePictureParmas) => {
        console.log(values)
        dispatch(createPicture(values))
        setAddDetailOpen(false)
    }
    const dispatch = useAppDispatch()
    const data: ImageCardProps[] = detailState.list.map((d) => ({ id: d.id, src: d.imageUrl, title: d.title, desc: d.desc }))
    const onChange: PaginationProps['onChange'] = (page, pageSize) => {
        searchParams.set('page', page.toString())
        searchParams.set('pageSize', pageSize.toString())
        setSearchParams(searchParams)
    }
    useEffect(() => {
        if (detailState.status === 'idle' && categoryState.status === 'succeeded') {
            dispatch(fetchPictures({ categoryId: categoryState.current as number, page: pager.page, pageSize: pager.pageSize }))
        }
        if (detailState.status === 'idle' && favoriteState.status === 'succeeded') {
            dispatch(fetchFavoritePictures({ favoriteId: favoriteState.current as number, page: pager.page, pageSize: pager.pageSize }))
        }
    }, [categoryState, detailState.status, dispatch, favoriteState, favoriteState.status, pager.page, pager.pageSize])
    useEffect(() => {
        const page = searchParams.get('page')
        const pageSize = searchParams.get('pageSize')
        dispatch(detailPagerChange({ page: stringToNumber(page), pageSize: stringToNumber(pageSize) }))
    }, [dispatch, searchParams])

    useEffect(()=>{
        console.log(width,height)
        const cc = Math.floor((width - 400) / 300)
        console.log(cc)
        setColumnCount(cc)
    },[height, width])
    return (
        <>
            {addDetailOpen && <PictureFormModal name={'createDetail'} open={addDetailOpen} title={'上传图片'} onOK={onCreate} onCancel={() => { setAddDetailOpen(false) }} />}
            <Button onClick={() => setAddDetailOpen(true)}>创建图片</Button>
            <ImageGrid data={data} type={1}  columnCount={columnCount}/>
            <Pagination style={{ position: 'absolute', transform: 'translate(-50%, 0)', left: '50%', padding: '23px 0px' }} current={pager.page} pageSize={pager.pageSize} total={pager.totalRows} showQuickJumper onChange={onChange} />
        </>
    )
}

export default UserContent